<%@ page language="java" contentType="text/html; charset=UTF-8"	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<%@taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<%@ page language="java" import="com.qdairlines.constant.BaseConsts" %>

<%
	String path = request.getContextPath();
	String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
	
%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>用户列表</title>
	<link rel="stylesheet" href="<%=basePath %>/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="<%=basePath %>/plugins/bootstraptable/bootstrap-table.css">
    <link rel="stylesheet" href="<%=basePath %>/bootstrap/css/custom-theme/jquery-ui-1.9.2.custom.css">
    <link rel="stylesheet" href="<%=basePath%>/bootstrap/css/bootstrap-multiselect.css">
    <link href="<%=basePath %>/hplus/css/font-awesome.min.css" rel="stylesheet">
    <link href="<%=basePath %>/plugins/bootstrapValidator/css/bootstrapValidator.min.css"  rel="stylesheet">
    <script src="<%=basePath %>/js/jquery.min.js"></script>
	<script src="<%=basePath %>/bootstrap/js/bootstrap.min.js"></script>
	<script src="<%=basePath %>/bootstrap/js/bootstrapQ.js"></script>
	<script src="<%=basePath %>/plugins/bootstraptable/bootstrap-table.js"></script>
	<script src="<%=basePath %>/plugins/bootstraptable/locale/bootstrap-table-zh-CN.js"></script>
	
	<script src="<%=basePath %>/plugins/bootstrapValidator/js/bootstrapValidator.min.js"></script>
	<script src="<%=basePath %>/plugins/bootstrapValidator/js/language/zh_CN.js"></script>
	<script src="<%=basePath%>/bootstrap/js/bootstrap-multiselect.js"></script>
	<script src="<%=basePath %>/js/util.js"></script>

	<link rel="stylesheet" href="<%=basePath%>/css/toastr.min.css">
	<script src="<%=basePath%>/js/toastr.min.js"></script>
	<script src="<%=basePath%>/js/toastrinit.js"></script>
	<script src="<%=basePath %>/plugins/layer/layer.js"></script>
	<script src="<%=basePath %>/js/front_util.js"></script>
	
	<!--  
	<script src="<%=basePath %>/plugins/validator/validator.min.js"></script>
	-->
<style> 
.table-hover>tbody>tr:hover{background-color:#C6E2FF}
</style>

<script type="text/javascript">
/* 加载父页面的通用CSS，fun来自font-util.js*/
addCSSToChildPage();
$(document).ready(function(){ 
	//初始化的时候，角色表格隐藏 
	$("#table_role_related_div").hide();
	    
	//在表中显示数据
    var url = '<%=basePath %>/user/listUserByQueryKey.do';
    //var url = '<%=basePath %>/user/getDateList.do';
    $("#table").bootstrapTable({
    		/*数据参数清单*/
            method:'post',//请求方式
            url:url,//请求url
            dataType:'json',
            queryParams:queryParams,//传递参数
            contentType:'application/x-www-form-urlencoded',//请求数据内容格式
            /*样式参数清单*/ 
            //分页参数
            pagination:true,//是否分页
        	pageList: [10, 25, 50, 100],
			pageSize:10,
			pageNumber:1,
			sidePagination:'server',
			
            showRefresh: true,                  //是否显示刷新按钮
            striped:true,//行间隔色
            locale:"${language}" ,
            //showToggle : true, 
            toolbar:"#custom-toolbar",
            height :"540",
            //showColumns:true
            clickToSelect:true,
            onClickRow: function (row,$element) {
            	  $element.addClass('info').siblings().removeClass('info').end(); 
            	  $("#table_role_related_div").show();
            	  //点击每一个用户，查询当前用户角色
            	  $("#role_query_workcode").val(row.workcode);
            	  //$("#table_role_userName").text(row.userRealName);
            	  
            	  $("#table_role_relate_title").text( "<spring:message code='user.role.relate' />：" + getRelateRoleCount(row.workcode,"<%=BaseConsts.Y%>"));
            	  $("#table_role_no_relate_title").text("<spring:message code='user.role.norelate' />：" + getRelateRoleCount(row.workcode,"<%=BaseConsts.N%>"));
            	  $("#table_role_relate").bootstrapTable('refresh');
            	  $("#table_role_no_relate").bootstrapTable('refresh');
            }


    });
    //在初始化和查询要传递的参数
    function queryParams(params){	
        return {
        	querykey:$("#query_querykey").val() ,
           // userName : $("#query_userName").val() ,
           // userRealName : $("#query_userRealName").val() ,
           // roleName : $("#query_RoleName").val() ,
        	limit : params.limit ,
			offset : params.offset
        };
    };
    


    //查询按钮的点击事件
    $("#btn_query").click(function(){
        $("#table").bootstrapTable('refresh');
        
        $("#role_query_workcode").val("-");
  	    $("#table_role_userName").text("");
        $("#table_role_relate").bootstrapTable('refresh');
        $("#table_role_no_relate").bootstrapTable('refresh');
        $("#table_role_related_div").hide();
    });

    //添加
    $("#btn_add").click(function(){
    	
 		$('#myModal').modal('show');
    	 
    	 $('#user_id').val("");
    	 $('#workcode').val("");
    	 $('#userName').val("");
    	 $('#userRealName').val("");
     	 $('#user_status').multiselect('disable');

    });
    
    
    
    
    //以下是关于已关联角色的操作
    var listUserRole = '<%=basePath %>/user/listUserRole.do';
    $("#table_role_relate").bootstrapTable({
    		/*数据参数清单*/
            method:'post',//请求方式
            url:listUserRole,//请求url
            dataType:'json',
            queryParams:queryParamsRole,//传递参数
            contentType:'application/x-www-form-urlencoded',//请求数据内容格式
            /*样式参数清单*/ 
            //分页参数
            pagination:false,//是否分页
        	pageList: [10, 25, 50, 100],
			pageSize:5,
			pageNumber:1,
			sidePagination:'client', //客户端分页
		    search: true, //客户端搜索
            //showRefresh: true,                  //是否显示刷新按钮
        	showHeader:false,
            striped:true,//行间隔色
            locale:"${language}" ,
            //showToggle : true, 
            height :"281",
            toolbar:"#role-toolbar" ,

    });
    //在初始化和查询要传递的参数
    function queryParamsRole(params){	
        return {
        	workcode : $("#role_query_workcode").val() ,
        	isRelated : "<%=BaseConsts.Y%>",
        	limit : params.limit ,
			offset : params.offset
        };
    };  
    
    //以下是关于已关联角色的操作

    $("#table_role_no_relate").bootstrapTable({
    		/*数据参数清单*/
            method:'post',//请求方式
            url:listUserRole,//请求url
            dataType:'json',
            queryParams:queryParamsRoleNoRelate,//传递参数
            contentType:'application/x-www-form-urlencoded',//请求数据内容格式
            /*样式参数清单*/ 
            //分页参数
            pagination:false,//是否分页
        	pageList: [10, 25, 50, 100],
			pageSize:5,
			pageNumber:1,
			sidePagination:'client', //客户端分页
		    search: true, //客户端搜索
            //showRefresh: true,                  //是否显示刷新按钮
        	showHeader:false,
            striped:true,//行间隔色
            locale:"${language}" ,
            //showToggle : true, 
            height :"243",
            toolbar:"#role-toolbar-no-relate" ,

    });
    //在初始化和查询要传递的参数
    function queryParamsRoleNoRelate(params){	
        return {
        	workcode : $("#role_query_workcode").val() ,
        	isRelated : "<%=BaseConsts.N%>",
        	limit : params.limit ,
			offset : params.offset
        };
    };  
    
    
    
    var user_status_defaultVal = "";
  //人员状态选择框初始化
    $.ajax({
        url:"<%=basePath%>/dict/getMultiselect.do",
        type:"POST",
        dataType:"json",
        data:{dictionaryCode:"T_USER_STATUS"},
        success:function(data){
            $("#user_status").empty();
            $("#user_status").multiselect({
                enableFiltering: false,
                 maxHeight: 300
            });
            $("#user_status").multiselect('dataprovider',eval(data.jsonData));//数据初始化。如果有数据默认值，则需要参考最上面的代码
            $("#user_status").multiselect('select',data.defaultVal); //默认选择值
            user_status_defaultVal = data.defaultVal;
            $("#user_status").multiselect('refresh'); //配合默认选择值进行刷新

        }    
	 });
  
    //表单验证绑定
    $("#user_edit_form").bootstrapValidator(); 
    $('#btn_user_save').click(function(){
    	var bootstrapValidator = $("#user_edit_form").data('bootstrapValidator');
    	bootstrapValidator.resetForm();
    	bootstrapValidator.validate();
    	if(! bootstrapValidator.isValid()){
    		  return false;
    	}
    	//验证通过继续提交
    	$.ajax({
    		type:"POST",
			dataType:"json",
            url:"<%=basePath%>/user/save.do",
            data:{id: $("#user_id").val(), 
            	workcode: $("#workcode").val(),
            	userName: $("#userName").val(),
            	userRealName: $("#userRealName").val()
            },
            success:function(data){
            	if(data=="error"){
            		toastr.error("<spring:message code='base.error'/>");
            	}else{
	            	toastr.success("<spring:message code='base.success'/>");
	           	    $('#myModal').modal('hide');
	           	    $("#table").bootstrapTable('refresh');
            	}
            },error:function(data){
            	toastr.error("<spring:message code='base.error'/>");
            }    
    	 });
    });
    
	
});//document结束

function orderFormatter(value,row,index){
	return index+1;
}

//用户状态系显示
function user_status_formatter(value, row, index) {
	if(row.status=='1'){
		return '<span class="text-success">' + row.statusName + '</span>';
	}
	if(row.status=='0'){
		return '<span class="text-danger">' + row.statusName + '</span>';
	}
	else{
		return '<span class="text-danger"><spring:message code="user.status.error"/></span>';
	}
};

//角色状态显示
function role_status_formatter(value, row, index) {
	if(row.status=='1'){
		return  row.roleName ;
	}
	if(row.status=='0'){
		return row.roleName ;
	}
	else{
		return '<span class="text-danger">'  + row.roleName + '-<spring:message code="role.status.error"/></span>';
	}
};


//用户操作
function operateFormatter(value, row, index) {
	if(row.workcode == 'ADMIN'){
		return null;
	}
	
	if(row.status=='1'){
        return [
            '<a class="user_edit ml10" href="javascript:void(0)" title="<spring:message code='base.edit'/>">',
                '<span class="glyphicon glyphicon-edit "  style="font-size:15px;"></span>',
            '</a>',
            '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;',
            '<a class="user_disable ml10" href="javascript:void(0)" title="<spring:message code='base.disable'/>">',
                '<span class="glyphicon glyphicon-remove"  style="font-size:15px;"></span>',
            '</a>',
            '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;',
            '<a class="user_change_password ml10" href="javascript:void(0)" title="<spring:message code='base.change.password'/>">',
                '<span class="glyphicon glyphicon-eye-open"  style="font-size:15px;"></span>',
            '</a>'
        ].join('');
    }else{
    	return [
    	        '<a class="user_edit ml10" href="javascript:void(0)" title="<spring:message code='base.edit'/>">',
                '<span class="glyphicon glyphicon-edit "  style="font-size:15px;"></span>',
            '</a>',
            '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;',
            '<a class="user_able ml10" href="javascript:void(0)" title="<spring:message code='base.able'/>">',
                '<span class="glyphicon glyphicon-ok"  style="font-size:15px;"></span>',
            '</a>'
        ].join('');
    }
}


//角色操作
function role_operateFormatter(value, row, index) {
	if(row.related=='yes'){
		 return [  '<a class="role_delete ml10" href="javascript:void(0)" title="<spring:message code='base.delete'/>">',
		              '<span class="fa fa-arrow-down"  style="font-size:15px;"></span>',
		          '</a>'
		      ].join('');
	}
	if(row.related=='no' && row.status=='1'){ 
		 return [  '<a class="role_insert ml10" href="javascript:void(0)" title="<spring:message code='base.add'/>">',
		              '<span class="fa fa-arrow-up"  style="font-size:15px;"></span>',
		          '</a>'
		      ].join('');
	}
	else{
		 return [  '<a class="role_error ml10" href="javascript:void(0)" title="<spring:message code='user.role.disablemsg'/>">',
		              '<span class="glyphicon glyphicon-exclamation-sign text-danger"  style="font-size:15px;"></span>',
		          '</a>'
		      ].join('');
	}
}

//
function getRelateRoleCount(workcode,isRelated){
	var count =  "";
	$.ajax({
		async:false,
		type:"POST",
		dataType:"json",
        url:"<%=basePath%>/user/getUserRoleCount.do",
        data:{workcode : $("#role_query_workcode").val() ,	isRelated : isRelated},
        success:function(data){
        	count = data;
        },error:function(data){
        	count =  "error";
        }    
	 });
	return count;
}

//操作功能
window.operateEvents = {
	'click a.user_edit': function (e, value, row, index) {
		$.ajax({
            type: "POST",
             url: "<%=basePath %>/user/getUser.do",
             data: {workcode:row.workcode},
             success: function(data){	
	             var obj = JSON.parse(data);
            	 $('#myModal').modal('show');
            	 
            	 $('#user_id').val(obj.id);
            	 $('#workcode').val(obj.workcode);
            	 $('#userName').val(obj.userName);
            	 $('#userRealName').val(obj.userRealName);
            	 
            	 $('#user_status').val(obj.status);
            	 $('#user_status').multiselect('select',obj.status); //默认选择值
             	 $('#user_status').multiselect('refresh'); //配合默认选择值进行刷新
             	 $('#user_status').multiselect('disable');
             }
         });
		

     } , 
     'click a.user_disable': function (e, value, row, index) {
       	bootstrapQ.confirm({
      			title:"<spring:message code='base.alert.title'/>",
      			msg:"<spring:message code='user.confirm.disable.user'/>?"   
      		},function(){
       			$.ajax({
		            type: "POST",
		             url: "<%=basePath %>/user/disable.do",
		             data: {id:row.id},
		             success: function(data){	
		            	 toastr.success("<spring:message code='base.success'/>");
		            	 $("#table").bootstrapTable('refresh');
		             },error:function(data){
		            	 toastr.error("<spring:message code='base.error'/>");
		            	  $("#table").bootstrapTable('refresh');
		             }
		         });
       		});
       }, 
       'click a.user_able': function (e, value, row, index) {
          	bootstrapQ.confirm({
         			title:"<spring:message code='base.alert.title'/>",
         			msg:"<spring:message code='user.confirm.able.user'/>?"   
         		},function(){
	          		$.ajax({
	   		            type: "POST",
	   		             url: "<%=basePath %>/user/able.do",
	   		             data: {id:row.id},
	   		             success: function(data){
	   		            	 toastr.success("<spring:message code='base.success'/>");
	   		                 $("#table").bootstrapTable('refresh');
	   		             } ,error:function(data){
			            	 toastr.error("<spring:message code='base.error'/>");
			            	  $("#table").bootstrapTable('refresh');
			             }
	   		         });
          		});
          },'click a.role_delete': function (e, value, row, index) {
         		$.ajax({
  		            type: "POST",
  		             url: "<%=basePath %>/user/deleteUserRole.do",
  		             data: {userRoleid:row.userRoleId},
  		             success: function(data){
  		            	 toastr.success("<spring:message code='base.success'/>");
  		                 $("#table_role_relate").bootstrapTable('refresh');
  		                 $("#table_role_no_relate").bootstrapTable('refresh');
  		             } ,error:function(data){
		            	 toastr.error("<spring:message code='base.error'/>");
		            	 $("#table_role_relate").bootstrapTable('refresh');
		            	 $("#table_role_no_relate").bootstrapTable('refresh');
	            	 }
  		         });
          },'click a.role_insert': function (e, value, row, index) {
       		$.ajax({
		             type: "POST",
		             url: "<%=basePath %>/user/saveUserRole.do",
		             data: {roleId:row.id,
		            	 	workcode : $("#role_query_workcode").val() 
		             	},	
		             success: function(data){
		            	 toastr.success("<spring:message code='base.success'/>");
		                 $("#table_role_relate").bootstrapTable('refresh');
		                 $("#table_role_no_relate").bootstrapTable('refresh');
		             } ,error:function(data){
	            	 toastr.error("<spring:message code='base.error'/>");
	            	  $("#table_role_relate").bootstrapTable('refresh');
	            	  $("#table_role_no_relate").bootstrapTable('refresh');
            	 }
		         });
      }, 'click a.user_change_password': function (e, value, row, index) {
    	  layer.open({
    		  id:'user_change_password',
    		  type: 2,
    		  maxmin:true,
    		  title:"<spring:message code='base.change.password'/>:  "+row.userRealName,
    		  area: ['50%', '40%'],
    		  content: '<%=basePath %>/user/toChangePasswordPage.do?userId='+row.id
    	 });
 	}
} ;
</script>

</head>
<body>
 <div class="row" style="margin:1px">
      <div class="col-md-7 col-sm-7">
            <div id="custom-toolbar">
                    <div class="form-inline"   role="form">
                    <form id="queryForm">
                        <div class="form-group">
                            <div >
                             <input  type="text" id="query_querykey"  class=""  placeholder="<spring:message code='user.querykey'/>" > 
                            <!-- 
                                <input  type="text" id="query_userName"  class="" style="width:100px;" placeholder="账号" > 
                                <input  type="text" id="query_userRealName"  class="" style="width:100px;" placeholder="姓名" > 
                                <input  type="text" id="query_RoleName"  class=""  style="width:100px;" placeholder="角色名" > 
                                 -->	
                            </div>
                        </div>
                        <button id="btn_query" 	type="button" class="btn btn-primary"><spring:message code='base.search'/></button>
                    	<button id="btn_add" 	type="button" class="btn btn-primary"><spring:message code='base.add'/></button>
					</form>
					
                    </div>
            </div>
            <table   id="table" class="table table-hover" >		  		    
                <thead>
                    <tr class="success"> 
                    	<th data-radio="true"></th>
                        <th data-field="workcode"><spring:message code='user.workcode'/></th>
                       <!--   <th data-field="userName"  >账号</th> -->
                        <th data-field="depName"><spring:message code='user.deptname'/></th>
                        <th data-field="userRealName"  ><spring:message code='user.userrealname'/></th> 
                        <th data-field="status"  data-formatter="user_status_formatter"><spring:message code='user.status'/></th> 
                        <th data-field="operation" data-formatter="operateFormatter" data-events="operateEvents"><spring:message code='base.operate'/></th>
                    </tr>
                </thead>
            </table>
    	</div>  

  <div class="col-md-5 col-sm-5 "  id = "table_role_related_div">
  <input  type="text" id="role_query_workcode"  class="hidden" > 
  		<div class="row-fluid " >
	    	  <div id="role-toolbar">
				<span class="fa-stack fa-lg text-success">
				  	<i class="fa fa-square-o fa-stack-2x"></i>
				  	<i class="fa fa-chain fa-stack-1x"></i>
				 </span>
				 <span class="text-success" id = "table_role_relate_title"><spring:message code='user.role.relate'/></span>
	    	  	 
	    	  </div>	

			<table id="table_role_relate"  class="table table-hover">
				<thead>    
					<tr>
						<th data-field="roleCode" data-width="40%" ><spring:message code='role.rolecode'/></th>
						<th data-field="roleName" data-width="50%" data-formatter="role_status_formatter"><spring:message code='role.rolename'/></th>
						<th data-field="operation" data-width="10%" data-formatter="role_operateFormatter" data-events="operateEvents"><spring:message code='base.delete'/></th>
					</tr>
				</thead>
			</table>
		</div>
		
		<div class="row-fluid ">
	    	  <div id="role-toolbar-no-relate">
	    	  	 <span class="fa-stack fa-lg text-danger">
				  <i class="fa fa-square-o fa-stack-2x"></i>
				  <i class="fa fa-chain-broken fa-stack-1x"></i>
				</span>
				 <span class="text-danger" id = "table_role_no_relate_title"><spring:message code='user.role.norelate'/></span>
	    	  </div>	
			<table id="table_role_no_relate"  class="table table-hover">
				<thead>    
					<tr>
						<th data-field="roleCode" data-width="40%" ><spring:message code='role.rolecode'/></th>
						<th data-field="roleName" data-width="50%" data-formatter="role_status_formatter"><spring:message code='role.rolename'/></th>
						<th data-field="operation" data-width="10%" data-formatter="role_operateFormatter" data-events="operateEvents"><spring:message code='base.delete'/></th>
					</tr>
				</thead>

			</table>
		</div>		
	</div> 
</div> 
	
	
	<!-- modal -->
	 <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	   <div class="modal-dialog">
	      <div class="modal-content">
	         <div class="modal-header">
	            <button type="button" class="close"  data-dismiss="modal" aria-hidden="true">&times;</button>
	            <h4 class="modal-title" id="myModalLabel"><spring:message code='user.edit'/> </h4>
	         </div>
			 <div class="modal-body">
				<form class="form-horizontal" id="user_edit_form">
					<input type="hidden" id="user_id" name="user_id" value="">
					<div class="form-group">
						<label for="presstitle" class="col-sm-3 control-label"><spring:message code='user.workcode'/><font color='red'>*</font>:</label>
						<div class="text-left col-sm-6">
							<input id="workcode" type="text" name="workcode" style="width:100%"  class="form-control" 
							required  />
						</div>
					</div>
					<div class="form-group">
						<label for="presstitle" class="col-sm-3 control-label"><spring:message code='user.name'/><font	color='red'>*</font>:</label>
						<div class="text-left col-sm-6">
							<input id="userName" type="text" name="userName" style="width:100%"  class="form-control" 
							required  />
						</div>
					</div>
					<div class="form-group">
						<label for="presstitle" class="col-sm-3 control-label"><spring:message code='user.userrealname'/><font color='red'>*</font>: </label>
						<div class="text-left col-sm-6">
							<input id="userRealName" type="text" name="userRealName" style="width:100%" value="${user.userRealName}" required="required" class="form-control" />
						</div>
					</div>
					<div class="form-group">
						<label for="presstitle" class="col-sm-3 control-label"><spring:message code='user.status'/><font color='red'>*</font>: </label>
						<div class="text-left col-sm-6">
							<select id="user_status" name="user_status" class="form-control"></select>
						</div>
					</div>
				</form>
				<div class="form-group">  
		        	<div style="text-align:center">  
		                <button id= "btn_user_save" type="button" class="btn btn-primary btn-sm"><spring:message code='base.save'/> </button>  
		            </div>  
                </div>  
			</div>
		</div>
	</div><!-- /.modal-content -->
</div><!-- /.modal -->

</body>
</html>